<template>
  <div>
    <img
        class="screenfull-svg"
        :src="isFullscreen ? exitFullscreenIcon : fullscreenIcon"
        @click="handleToggle"
        alt="全屏切换"
        :style="{
        opacity: supported ? 1 : 0.5,
        cursor: supported ? 'pointer' : 'not-allowed'
      }"
    >
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import fullscreenIcon from '@/assets/icon/big.png'
import exitFullscreenIcon from '@/assets/icon/small.png'

// 1. 手动维护全屏状态（不依赖 useFullscreen 的内部状态）
const isFullscreen = ref(false);
// 检查浏览器是否支持全屏 API（基于父应用 document）
const supported = ref(!!(
    window.parent.document.documentElement.requestFullscreen ||
    window.parent.document.documentElement.webkitRequestFullscreen ||
    window.parent.document.documentElement.mozRequestFullScreen ||
    window.parent.document.documentElement.msRequestFullscreen
));

// 2. 核心：同步父应用的全屏状态
const syncParentFullscreenState = () => {
  const parentDoc = window.parent.document;
  // 检查父应用是否处于全屏状态（兼容各浏览器）
  isFullscreen.value = !!(
      parentDoc.fullscreenElement ||
      parentDoc.webkitFullscreenElement ||
      parentDoc.mozFullScreenElement ||
      parentDoc.msFullscreenElement
  );
};

// 3. 监听父应用的全屏状态变化事件
onMounted(() => {
  const parentDoc = window.parent.document;
  // 初始化状态
  syncParentFullscreenState();
  // 绑定父应用的全屏事件（关键：监听父应用的事件，而非子应用）
  parentDoc.addEventListener('fullscreenchange', syncParentFullscreenState);
  parentDoc.addEventListener('webkitfullscreenchange', syncParentFullscreenState);
  parentDoc.addEventListener('mozfullscreenchange', syncParentFullscreenState);
  parentDoc.addEventListener('MSFullscreenChange', syncParentFullscreenState);
});

// 4. 卸载时移除监听
onUnmounted(() => {
  const parentDoc = window.parent.document;
  parentDoc.removeEventListener('fullscreenchange', syncParentFullscreenState);
  parentDoc.removeEventListener('webkitfullscreenchange', syncParentFullscreenState);
  parentDoc.removeEventListener('mozfullscreenchange', syncParentFullscreenState);
  parentDoc.removeEventListener('MSFullscreenChange', syncParentFullscreenState);
});

// 5. 直接操作父应用的全屏 API（绕开子应用沙箱限制）
const handleToggle = async () => {
  if (!supported.value) {
    window.parent.console.warn('当前浏览器不支持全屏 API');
    return;
  }

  const parentDoc = window.parent.document;
  try {
    if (isFullscreen.value) {
      // 退出全屏：调用父应用的 exitFullscreen
      if (parentDoc.exitFullscreen) {
        await parentDoc.exitFullscreen();
      } else if (parentDoc.webkitExitFullscreen) {
        await parentDoc.webkitExitFullscreen();
      } else if (parentDoc.mozCancelFullScreen) {
        await parentDoc.mozCancelFullScreen();
      } else if (parentDoc.msExitFullscreen) {
        await parentDoc.msExitFullscreen();
      }
    } else {
      // 进入全屏：对父应用的根元素全屏
      const target = parentDoc.documentElement;
      if (target.requestFullscreen) {
        await target.requestFullscreen();
      } else if (target.webkitRequestFullscreen) {
        await target.webkitRequestFullscreen();
      } else if (target.mozRequestFullScreen) {
        await target.mozRequestFullScreen();
      } else if (target.msRequestFullscreen) {
        await target.msRequestFullscreen();
      }
    }
    // 强制同步状态（防止延迟）
    syncParentFullscreenState();
  } catch (err) {
    window.parent.console.error('全屏操作失败', err);
  }
};
</script>

<style lang='scss' scoped>
.screenfull-svg {
  cursor: pointer;
  vertical-align: middle;
  width: 23px;
}
</style>
